<script lang="ts" setup>
import { ControlsCard, SearchCard, TableCard } from '@/components/basic/Card'
import { reactive, ref, toRefs } from 'vue'
// import { AlertOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import to from '@/utils/awaitTo'
import { Api } from '@/api'
// import { message, Modal } from 'ant-design-vue'

// 响应式数据
const queryRef = ref()
// const formRef = ref()
const state = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    searchName: '' // 医生名称
  },
  open: false, // 开关
  total: 0, // 总页数
  title: '', // 标题
  form: {},//表单
  loading: false, // 加载
  list: [], //列表
  sendLoading: false //按钮loading
})

const { queryParams, open, title, form, loading, list, sendLoading, total } = toRefs(state)


// 数据列表
const getList = async () => {
  loading.value = true
  const [error, data] = await to(Api.doctor.doctorList(queryParams.value))
  loading.value = false
  if (!error) {
    console.log(data)
    list.value = data
  }
}

// 打开新增医院
// const handleAddHospital = () => {
//   open.value = true
//   title.value = '新增医院'
// }

// 打开修改医院
// const handleEditHospital = async (item) => {
//   reset()
//   const [error, data] = await to(Api.hospital.hospitalEcho(item.hospitalId))
//   if (!error) {
//     open.value = true
//     title.value = '修改医院'
//     form.value = data
//   }
// }

// 打开删除医院
// const handleDelete = async (item) => {
//   const { hospitalId, hospitalName } = item
//   Modal.confirm({
//     title: `删除`,
//     icon: createVNode(ExclamationCircleOutlined),
//     content: `是否删除${hospitalName}医院`,
//     onOk() {
//       // eslint-disable-next-line no-async-promise-executor
//       return new Promise(async (resolve, reject) => {
//         const [error, data] = await to(Api.hospital.hospitalDelete(hospitalId))
//         if (!error) {
//           console.log(data)
//           message.success(`${hospitalName},删除操作成功`)
//           await getList()
//           resolve(true)
//         }
//         reject(false)
//       }).catch(() => console.log('Oops errors!'))
//     }
//   })
// }

// 确认事件
// const handleOk = (formEl) => {
//   if (!formEl) return
//   formEl.validate().then(async (values) => {
//     const params = Object.assign({}, form.value, values)
//     // 修改
//     if (params.hospitalId) {
//       const [error, data] = await to(Api.hospital.hospitalEdit(params))
//       if (!error && data) {
//         open.value = false
//         message.success('操作成功')
//         await getList()
//       }
//     }
//
//     // 新增
//     else {
//       const [error, data] = await to(Api.hospital.hospitalAdd(params))
//       if (!error && data) {
//         open.value = false
//         message.success('操作成功')
//         await getList()
//       }
//     }
//   })
// }

// 重置表单
// const reset = () => {
//   form.value = {
//     city: '',
//     createBy: '',
//     createTime: '',
//     hospitalName: '',
//     province: '',
//     silp3: '',
//     updateBy: '',
//     hospitalId: '',
//     yunyingId: '',
//     commercialAffairsId: ''
//   }
// }

// 搜索事件
const handleQuery = () => {
  getList()
}

// 重置搜索
const handleReset = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  getList()
}

// 表格字典
const columns = [
  {
    title: `头像`,
    dataIndex: `uniqueImg`,
    key: `uniqueImg`,
    align: `center`
  },
  {
    title: `医生名字`,
    dataIndex: `doctorName`,
    key: `doctorName`,
    align: `center`
  },
  {
    title: `医院名称`,
    dataIndex: `uniqueName`,
    key: `uniqueName`,
    align: `center`
  },
  // {
  //   title: `用户ID`,
  //   dataIndex: `userId`,
  //   key: `userId`,
  //   align: `center`
  // },
  {
    title: `抖音ID`,
    dataIndex: `affiliatedTiktokId`,
    key: `affiliatedTiktokId`,
    align: `center`
  }
]


getList()
</script>

<template>
  <div>
    <SearchCard>
      <a-form ref="queryRef" :model="queryParams" layout="inline">
        <a-form-item label="医生名字" name="searchName">
          <a-input v-model:value="queryParams.searchName" placeholder="请输入医院管理" @pressEnter="handleQuery" />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleQuery">搜索</a-button>
            <a-button @click="handleReset(queryRef)">重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </SearchCard>

    <ControlsCard>
      <a-button type="ghost">医生总个数 {{list.length}}</a-button>
    </ControlsCard>

    <TableCard>
      <a-table :columns="columns" :data-source="list" :loading="loading" :pagination="false">
        <template #bodyCell=" { column, record }">
          <template v-if="column.dataIndex === 'uniqueImg'">
            <a-tooltip :title="record.userId" placement="top">
              <a-avatar :draggable="true" :src="record.uniqueImg" :srcset="record.uniqueImg" alt="loading..."
                        class="cursor-pointer" shape="square"
                        size="large" />
            </a-tooltip>
          </template>
        </template>
      </a-table>
    </TableCard>

    <!--    <PaginationCard>-->
    <!--      <Pagination v-model:page-num="queryParams.pageNum" v-model:page-size="queryParams.pageSize" :total="total"-->
    <!--                  @pagination="getList" />-->
    <!--    </PaginationCard>-->
  </div>
</template>

<style lang="less" scoped>

</style>
